<template>
  <div class="addReturn">
    <el-dialog
      :before-close="handClose"
      center
      width="30%"
      title="新增退货单"
      :visible.sync="off"
      append-to-body
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
      >
        <el-form-item label="根据商品编号来搜索" prop="shPosition">
          <el-select
            v-model="ruleForm.shPosition"
            filterable
            remote
            reserve-keyword
            placeholder="请输入商品编号"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.goodsId"
              :label="item.goodsName"
              :value="item.goodsId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商:" prop="providerId">
          <el-select
            style="width:200px"
            size="small"
            v-model="ruleForm.providerId"
            placeholder="请选择供应商"
          >
            <el-option
              size="small"
              v-for="item in supplier"
              :key="item.providerId"
              :label="item.providerName"
              :value="item.providerId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库" prop="storehouseId">
          <el-select
            style="width:200px"
            size="small"
            v-model="ruleForm.storehouseId"
            placeholder="请选择供仓库"
          >
            <el-option
              size="small"
              v-for="item in warehouse"
              :key="item.storehouseId"
              :label="item.shAddress"
              :value="item.storehouseId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="format">
          <el-input v-model.number="ruleForm.format"></el-input>
        </el-form-item>
        <el-form-item label="退货单号" prop="orderId">
          <el-input v-model.number="ruleForm.orderId"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称" prop="storeName">
          <el-input v-model.number="ruleForm.storeName"></el-input>
        </el-form-item>
        <el-form-item label="退货数量:" prop="quantity">
          <el-input v-model.number="ruleForm.quantity">
            <template slot="append">个数</template>
          </el-input>
        </el-form-item>
        <el-form-item label="进货价:" prop="price">
          <el-input v-model.trim="ruleForm.price" @blur="allTotal">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="总金额:" prop="allPrice">
          <el-input disabled v-model.trim="ruleForm.allPrice">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="退货原因:" prop="notes">
          <el-input type="textarea" v-model.trim="ruleForm.notes">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="create">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWarehouseList } from "@/api/jxc/warehouse.js";
import { getSupplierList } from "@/api/jxc/supplier.js";
import { findGoodsByNo } from "@/api/jxc/storage.js";
import { addReturn } from "@/api/jxc/return.js";
export default {
  name: "addReturn",
  props: {
    off: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    off(val) {
      if (val) {
        getWarehouseList({
          currentPage: 1,
          pageSize: 100,
          shStatus: this.rowData.shStatus
        }).then(
          res => {
            this.warehouse = res.data.list;
          },
          err => {}
        );
        getSupplierList({
          currentPage: 1,
          pageSize: 100
        }).then(
          res => {
            this.supplier = res.data.list;
          },
          err => {}
        );
      }
    }
  },
  data() {
    var isPositiveIntegar = (rule, value, callback) => {
      console.log("value", typeof value);
      if (typeof value === "number" && !isNaN(value) && value >= 0) {
        return callback();
      } else {
        return callback(new Error("请输入正整数"));
      }
    };
    return {
      loading: false,
      supplier: [],
      warehouse: [],
      options: [],
      retainTime: [
        { label: "30分钟", value: "30分钟" },
        { label: "一天", value: "1天" },
        { label: "二天", value: "2天" }
      ],
      rules: {
        quantity: [
          { required: true, message: "入库数不能为空", trigger: "blur" },
          { validator: isPositiveIntegar, trigger: "blur" }
        ]
      },
      ruleForm: {
        allPrice:"",
        format: "",
        goodsId: "",
        goodsNum:"",
        notes: "",
        orderId: "",
        price: "",
        providerId:"",
        quantity: "",
        storeName: "",
        storehouseId:"",
        type:"",
      }
    };
  },
  methods: {
      allTotal(event){
          console.log(event);
          this.ruleForm.allPrice = event.target.value * this.ruleForm.quantity;
      },
    remoteMethod(query) {
      if (query !== "") {
        this.ruleForm.goodsNum = query;
        this.loading = true;
        findGoodsByNo({
          currentPage: 1,
          pageSize: 10,
          goodsNum: query
        }).then(
          res => {
            this.options = res.data.list;
            this.loading = false;
            // this.options = list.filter(item => {
            //     return item.goodsName.toLowerCase().indexOf(query.toLowerCase()) > -1;
            // });
          },
          err => {}
        );
      } else {
        this.options = [];
      }
    },
    handleSelect() {},
    handleChange(row) {
      console.log("row", row);
      this.ruleForm.shTypeId = row[row.length - 1];
    },
    handClose() {
      this.$emit("update:off", false);
      console.log(this.$refs.ruleForm);
      this.ruleForm.imageUrl = "";
      this.$refs.ruleForm.resetFields();
    },
    create() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        } else {
          addReturn(this.ruleForm).then(
            res => {
              console.log("res新增退货单成功", res);
              this.$message({
                type: "success",
                message: "新增退货单成功"
              });
              this.handClose();
              this.$parent.getList();
            },
            err => {}
          );
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
/deep/.el-upload--picture-card {
  width: 70px;
  height: 70px;
  border: none;
}
</style>